<template>
	<div class="short-nav">
		<div class="container">
			<router-link to="/recommend" tag="div" class="item">
				<div class="box">
					<span class="iconfont nicerili flex-center">
						<span class="day">{{day}}</span>
					</span>
				</div>
				<p>每日推荐</p>
			</router-link>
      <router-link to="/songlist" tag="div" class="item">
        <div class="box">
          <span class="iconfont niceyinleliebiao song-list"></span>
        </div>
        <p>歌单</p>
      </router-link>
			<router-link to="/ranklist" tag="div" class="item">
				<div class="box">
					<span class="iconfont nicepaihangbang1"></span>
				</div>
				<p>排行榜</p>
			</router-link>
			<router-link to="/singer" tag="div" class="item">
				<div class="box">
					<span class="iconfont nicegeshou"></span>
				</div>
				<p>歌手</p>
			</router-link>
			<router-link to="/videolist" tag="div" class="item">
				<div class="box">
					<span class="iconfont niceshipin1"></span>
				</div>
				<p>视频</p>
			</router-link>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'ShortNav',
		data () {
			return {
			}
    },
    computed: {
      // 获取当天日期
      day () {
        let date = new Date()
        let day = date.getDate()
        return day
      }
    }
	}
</script>

<style lang="stylus" scoped>
	.short-nav {
		width: 100%;
		padding: 0.15rem 0 0.4rem;
		margin-bottom: 0.3rem;
		position: relative;
		&:after {
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			content: '';
			box-sizing: border-box;
			height: 1px;
			border-bottom: 1px solid rgba(203, 203, 203, 1);
			transform: scaleY(0.1);
			transform-origin: 0 0;
		}
		.container {
			display: flex;
			padding: 0 0.1rem;
		}
		.item {
			width: 20%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			.box {
				width: 0.85rem;
				height: 0.85rem;
				background: #ff5b73;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 0.15rem;
				.iconfont {
					color: #ffffff;
					font-size: 0.45rem;
					font-weight: 400;
					position: relative;
					.day {
            position: absolute;
            font-size: 0.24rem;
            top: 0.15rem;
            transform: scale(0.7);
					}
				}
				.song-list {
					font-size: 0.36rem;
					margin-left: 0.05rem;
					margin-top: 0.05rem;
				}
			}
			p {
				color: #ffffff;
				font-size: 0.24rem;
				font-weight: 200;
			}
		}
	}
</style>
